@import controllers.rules.routes.Assets
@import controllers.linking.routes
@import org.silkframework.learning.active.ActiveLearning
@import views.html.workspace.activity.taskActivityControl
@import models.linking.LinkCandidateDecision
@import org.silkframework.rule.LinkSpec

@(context: plugins.Context[LinkSpec])(implicit session: play.api.mvc.Session)

@header = {
  <link type="text/css" href="@Assets.at("stylesheets/table.css")" rel="stylesheet" />
  <link type="text/css" href="@Assets.at("stylesheets/pagination.css")" rel="stylesheet" />
  <link type="text/css" href="@Assets.at("stylesheets/editor/editor.css")" rel="stylesheet" />
  <link type="text/css" href="@Assets.at("stylesheets/learningEditor.css")" rel="stylesheet" />
  <link type="text/css" href="@Assets.at("stylesheets/activeLearning.css")" rel="stylesheet" />

  <script src="@Assets.at("js/jquery.pagination.js")" type="text/javascript"></script>
  <script type="text/javascript" src="@Assets.at("js/jquery.jsPlumb-1.5.5.js")"></script>
  <script type="text/javascript" src="@Assets.at("js/editor/editor.js")"></script>

  <script type="text/javascript">
    var inEditorEnv = false;
    var apiUrl = '@config.baseUrl/linking/tasks/@context.project.name/@context.task.id/referenceLink';
    var taskUrl = '@config.baseUrl/linking/tasks/@context.project.name/@context.task.id';

  </script>
}


@toolbar = {

}

@content = {
<div class="mdl-shadow--2dp">
  <div class="wrapper-header">
    <div class="wrapper-title">Linkage Rule Candidate</div>
    <button id="show_graph_button" class="mdl-button mdl-js-button mdl-button--icon toggle_graph_button" style="display: none;">
      <i class="material-icons">expand_more</i>
    </button>
    <button id="hide_graph_button" class="mdl-button mdl-js-button mdl-button--icon toggle_graph_button">
      <i class="material-icons">expand_less</i>
    </button>
    <div id="learning_fitness_info">Fitness: 543534 (based on 5634 positive and 4356 negative reference links)</div>
  </div>

  <div class="wrapper">
    <div id="rule_view" class="clearfix">
      @ruleGraph(context.task.data.rule, context)
    </div>

  </div>

</div>
<script type="text/javascript">
  $("#show_graph_button").click(function() {
    $(".toggle_graph_button").toggle();
    $("#rule_view").slideDown();
   });
  $("#hide_graph_button").click(function() {
    $(".toggle_graph_button").toggle();
    $("#rule_view").slideUp();
  });
</script>

}

@main(Some(context))(header)(toolbar)(content)